<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性</title>
</head>
<body>
    <script src='/js/vue.js'></script>
    <div id='app'>
        <!-- 1.拼接语法 -->
        <p>{{lastName+""+firstName}}</p>

        <!-- 2.通过method定义一个函数，然后来调用 -->
        <!-- 每调用一次函数，就会进行函数中的逻辑，循环进行函数逻辑的运行，性能会丢失 -->
        <p>{{getFullName()}}</p>

        <!-- 3.计算属性 通过computed 有缓存，可以多次调用 -->
        <p>{{fullName}}</p>
    </div>


    <!-- Vue-router Vuex Vue-axios -->

    <!-- 前端路由 后端路由 -->
    <script>
        let app = new Vue({
            el:'#app',
            data:{
                firstName:'Shane',
                lastName:'He',
            },
            methods:{
                getFullName(){
                    return this.lastName + " " + this.firstName
                }
            },
            // computed:{
            //     fullName:function(){
            //         return this.lastName + " " + this.firstName

            //     }
            // }

            //计算属性 起名尽量根据属性名取名，所以最好不要用getxxx 增强可读性
            computed:{
                //计算属性 看起来函数 但是把他当做属性来理解
                fullName(){
                    return this.lastName + " " + this.firstName

                }
            }
        })
    </script>
</body>
</html>